<template>
    <div>
        <h2>您好，欢迎超级管理员admin123登录本系统</h2>

        <el-card class="home-content">
            <div slot="header">
                <span>平台基本信息</span>
            </div>

            <div class="info-content">
                <div class="info-content-item">
                    <span class="item-icon el-icon-s-check"></span>
                    <div class="item-info-detail">
                        <span>专业数量</span>
                        <b>{{formData.major}}</b>
                    </div>
                </div>

                <div class="info-content-item">
                    <span class="item-icon el-icon-s-management"></span>
                    <div class="item-info-detail">
                        <span>图书种类</span>
                        <b>{{formData.books}}</b>
                    </div>
                </div>

                <div class="info-content-item">
                    <span class="item-icon el-icon-user-solid"></span>
                    <div class="item-info-detail">
                        <span>学生数量</span>
                        <b>{{formData.student}}</b>
                    </div>
                </div>

                <div class="info-content-item">
                    <span class="item-icon el-icon-s-custom"></span>
                    <div class="item-info-detail">
                        <span>教师数量</span>
                        <b>{{formData.teacher}}</b>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'home',
    componentTitle: '首页',
    data () {
        return {
            formData: {}
        }
    },
    mounted () {
        axios({
            url: 'http://127.0.0.1:3000/api/home/list',
            method: 'get'
        }).then(res => {
            this.formData = res.data.data
        })
    }
}
</script>

<style lang="scss" scoped>
    h2 {
        padding-left: 30px;
    }

    .home-content {
        margin: 30px;

        .info-content {
            display: flex;

            .info-content-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                flex: 1;
                height: 108px;
                box-shadow: 0px 0px 15px #ddd;

                .item-icon {
                    font-size: 50px;
                }

                .el-icon-s-check {
                    color: #36a3f7;
                }

                .el-icon-s-management {
                    color: #f4516c;
                }

                .el-icon-user-solid {
                    color: #40c9c6;
                }

                .el-icon-s-custom {
                    color: #40c9c6;
                }

                &:hover {
                    .item-icon {
                        background: #36a3f7;
                        color: #fff;
                    }
                }

                .item-info-detail {
                    display: flex;
                    flex-direction: column;
                    color: rgba(0, 0, 0, .45);
                    font-size: 16px;

                    :first-child {
                        margin-bottom: 15px;
                    }
                }
            }

            .info-content-item + .info-content-item {
                margin-left: 40px;
            }
        }
    }
</style>